<style lang="scss" scoped>
.footer{
  height: 116rpx;
  z-index: 1;
  display: flex;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  box-sizing: content-box;

  & > view{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex: 1;
    color: #303030;

    & > view{
      &:nth-child(1){
        margin-bottom: 9rpx;
        width: 42rpx;
        height: 42rpx;

        i{
          font-size: 40rpx;
          color: #B6B6B7;
        }
      }
      &:nth-child(2){
        font-size: 24rpx;
      }
    }

    & > view:nth-child(1){
      margin-bottom: 9rpx;
    }

    &.active{
      color: #567AED;

      text{
        color: #567AED;
      }
    }

    & > view{
      display: flex;
      justify-content: center;
    }
  }
}
</style>

<template>
  <view class="footer" >
    <view @click="gotoPage(1)" :class="{
        active: active == 1
      }">
      <view>
        <text class="iconfont icon-xiaoxi1"></text>
      </view>
      <view>对话</view>
    </view>
    <view @click="gotoPage(2)" :class="{
      active: active == 2
      }">
      <view>
        <text class="iconfont icon-dengguang"></text>
      </view>
      <view>创作</view>
    </view>
    <view @click="gotoPage(3)" :class="{
        active: active == 3
      }">
      <view>
        <text class="iconfont icon-zhuanjiaguanli"></text>
      </view>
      <view>模拟</view>
    </view>
    <view @click="gotoPage(4)" :class="{
        active: active == 4
      }">
      <view>
        <text class="iconfont icon-huatu"></text>
      </view>
      <view>绘画</view>
    </view>
    <view @click="gotoPage(5)" :class="{
        active: active == 5
      }">
      <view>
        <text class="iconfont icon-wode4"></text>
      </view>
      <view>我的</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "HFooter",
  props: {
    'active': {
      type: String|Number,
      default: '1'
    }
  },
  data() {
    return {

    }
  },
  methods: {
    gotoPage(index) {
      const pages = [
          "/pages/index/index",
          "/pages/creation/index",
          "/pages/role/index",
          "/pages/draw/index",
          "/pages/my/index",
      ]
      if(this.active == index) return;

      this.utils.gotoPage(pages[index - 1])
    }
  }
}
</script>
